<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <!--    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
  <title>SmartVIS</title>
  <style>
    html,
    body,
    #app {
      height: 100%;
    }

    *,
    html,
    body {
      margin: 0;
      padding: 0;
      font-family: "Microsoft YaHei,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,\5FAE\8F6F\96C5\9ED1,Arial,sans-serif";
    }

    .s-loading-circle-loader {
      width: 64px;
      height: 64px;
      margin-left: -32px;
      margin-top: -32px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform-origin: 16px 16px;
      animation: rotate-animation 5s infinite linear;
    }

    @keyframes rotate-animation {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .s-loading-circle-loader .s-loading-circle-line:nth-child(1) {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    .s-loading-circle-loader .s-loading-circle-line:nth-child(2) {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }

    .s-loading-circle-loader .s-loading-circle-line:nth-child(3) {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }

    .s-loading-circle-line {
      width: 64px;
      height: 24px;
      position: absolute;
      top: 4px;
      left: 0;
      transform-origin: 4px 4px;
    }

    .s-loading-circle-loader .s-loading-circle-line .s-loading-circle:nth-child(1) {
      width: 8px;
      height: 8px;
      top: 50%;
      left: 50%;
      margin-top: -4px;
      margin-left: -4px;
      border-radius: 4px;
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }

    .s-loading-circle-loader .s-loading-circle-line .s-loading-circle:nth-child(2) {
      width: 16px;
      height: 16px;
      top: 50%;
      left: 50%;
      margin-top: -8px;
      margin-left: -8px;
      border-radius: 8px;
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }

    .s-loading-circle-loader .s-loading-circle-line .s-loading-circle:nth-child(3) {
      width: 24px;
      height: 24px;
      top: 50%;
      left: 50%;
      margin-top: -12px;
      margin-left: -12px;
      border-radius: 12px;
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }

    .s-loading-circle-loader .s-loading-circle-blue {
      background-color: #1f4e5a;
    }

    .s-loading-circle-loader .s-loading-circle-yellow {
      background-color: #ffb265;
    }

    .s-loading-circle-loader .s-loading-circle-red {
      background-color: #ff5955;
    }

    .s-loading-circle-loader .s-loading-circle-green {
      background-color: #00a691;
    }

    .s-loading-circle-loader .s-loading-circle {
      -webkit-animation: move-animation 2.5s infinite linear;
      animation: move-animation 2.5s infinite linear;
      position: absolute;
    }

    @keyframes move-animation {
      0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }

      25% {
        -webkit-transform: translate(-64px, 0);
        transform: translate(-64px, 0);
      }

      75% {
        -webkit-transform: translate(32px, 0);
        transform: translate(32px, 0);
      }

      100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
    }
  </style>
   <script type="application/javascript;version=1.7">
     var start = new Date().getTime() - performance.timing.navigationStart;
    console.log('白屏时间', start);
    window.onload = function () {
      let end = new Date().getTime() - performance.timing.navigationStart;
      console.log('首屏时间', end);
    }
  </script>
</head>

<body>
  <div id="app">
    <div class="s-loading-circle-loader">
      <div class="s-loading-circle-line">
        <div class="s-loading-circle s-loading-circle-blue"></div>
        <div class="s-loading-circle s-loading-circle-blue"></div>
        <div class="s-loading-circle s-loading-circle-blue"></div>
      </div>
      <div class="s-loading-circle-line">
        <div class="s-loading-circle s-loading-circle-yellow"></div>
        <div class="s-loading-circle s-loading-circle-yellow"></div>
        <div class="s-loading-circle s-loading-circle-yellow"></div>
      </div>
      <div class="s-loading-circle-line">
        <div class="s-loading-circle s-loading-circle-red"></div>
        <div class="s-loading-circle s-loading-circle-red"></div>
        <div class="s-loading-circle s-loading-circle-red"></div>
      </div>
      <div class="s-loading-circle-line">
        <div class="s-loading-circle s-loading-circle-green"></div>
        <div class="s-loading-circle s-loading-circle-green"></div>
        <div class="s-loading-circle s-loading-circle-green"></div>
      </div>
    </div>
  </div>

  <!-- <script>
    //     解决 火狐浏览器 执行拖拽操作 打开新的标签页的问题
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    }
    // let prefix = '/';
    let prefix = '/web/';
    document.write('<scr'+'ipt src=' + prefix + 'static/js/param.js></scr'+'ipt>');
  </script> -->

  <script src="./static/js/param.js"></script>
</body>

</html>
